import React, { useState, useEffect } from 'react';
import { Tabs, Card, Button, DatePicker, Select } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import AuthorizedButton from '@/components/AuthorizedButton';
import { connect } from 'dva';
import moment from 'moment';
import _ from 'lodash';
import qs from 'qs';
import ProjectTab from './components/ProjectPayBackModulusReport';
import CityTab from './components/CityPayBackModulusReport';
import PromiseTab from './components/InvestOfficialPromiseReport';
import AbilityTab from './components/InvestOfficialAbilityReport';
import {
  CONSTANT_TAB_KEY6, // 投资版
  CONSTANT_TAB_KEY4, // 能力版
  CONSTANT_TAB_KEY5, // 动态版
} from './utils/constant';

const { TabPane } = Tabs;
const { Option } = Select;

// const CONSTANT_TAB1 = '1';
// const CONSTANT_TAB2 = '2';
// const CONSTANT_TAB3 = '3';
// const CONSTANT_TAB4 = '4';

// const Page = props => {
//   console.log(props)
//   const [tabActive, setTabActive] = useState(CONSTANT_TAB1);
//   const [yearMonth, setYearMonth] = useState(moment().format('YYYY-MM'));
//   const [exportExcel, setExportExcel] = useState(true);
//   return (
//     <PageHeaderWrapper
//       className="page-header"
//       breadcrumb={null}
//       tags={
//         <Tabs
//           style={{ width: 620 }}
//           size="large"
//           activeKey={tabActive}
//           animated={false}
//           onChange={val => setTabActive(val)}
//         >
//           <TabPane tab="项目回款系数分析表" key={CONSTANT_TAB1}></TabPane>
//           <TabPane tab="城市回款系数分析表" key={CONSTANT_TAB2}></TabPane>
//           <TabPane tab="投资回款承诺分析表" key={CONSTANT_TAB3}></TabPane>
//           <TabPane tab="投资回款能力分析表" key={CONSTANT_TAB4}></TabPane>
//         </Tabs>
//       }
//       title={<></>}
//       extra={
//         <>
//           截止年月：
//           <DatePicker.MonthPicker
//             allowClear={false}
//             onChange={(momentDate, formatDate) => setYearMonth(formatDate)}
//             value={moment(yearMonth)}
//             format="YYYY-MM"
//             disabledDate={current => current && current > moment().endOf('day')}
//           />
//           &nbsp;&nbsp;
//           {/* <AuthorizedButton authority="SupplyAndMarketingMonthly_Export"> */}
//           <Button
//             disabled={exportExcel}
//             className="yellow-button"
//             target="_blank"
//           // href={`${process.env.apiUrl}/api/v1/report/supplyMonthlyDetailReportExport?${exportQueryString}`}
//           >
//             导出报表
//           </Button>
//           {/* </AuthorizedButton> */}
//         </>
//       }
//     >
//       {/* <Card className="page-header-card" bordered={false}>
//         {tabActive === CONSTANT_TAB1 && (
//           <ProjectTab yearMonth={yearMonth} setExportExcel={setExportExcel} />
//         )}
//         {tabActive === CONSTANT_TAB2 && (
//           <CityTab yearMonth={yearMonth} setExportExcel={setExportExcel} />
//         )}
//         {tabActive === CONSTANT_TAB3 && (
//           <PromiseTab yearMonth={yearMonth} setExportExcel={setExportExcel} />
//         )}
//         {tabActive === CONSTANT_TAB4 && (
//           <AbilityTab yearMonth={yearMonth} setExportExcel={setExportExcel} />
//         )}
//       </Card> */}
//     </PageHeaderWrapper>
//   );
// };

const tabVal = [
  {
    code: 'CONSTANT_TAB1',
    name: '项目回款系数分析表',
    permissionCode: 'tab_1030901',
  },
  {
    code: 'CONSTANT_TAB2',
    name: '城市回款系数分析表',
    permissionCode: 'tab_1030902',
  },
  {
    code: 'CONSTANT_TAB3',
    name: '投资回款承诺分析表',
    permissionCode: 'tab_1030903',
  },
  {
    code: 'CONSTANT_TAB4',
    name: '投资回款能力分析表',
    permissionCode: 'tab_1030904',
  },
];

const Page = props => {
  const { tabs } = props.Permissions;
  const [tabActive, setTabActive] = useState(undefined);
  const [newTab, setNewTab] = useState([]);
  const [yearMonth, setYearMonth] = useState(moment().format('YYYY-MM'));
  const [exportExcel, setExportExcel] = useState(true);
  useEffect(() => {
    if (!_.isEmpty(tabs)) {
      const newTab1 = [];
      _.forEach(tabVal, item => {
        _.forEach(tabs, x => {
          if (item.permissionCode === x) {
            newTab1.push(item);
            // router.replace(`/Analysis/PayBackModulusReport/${item.code}`);
          }
        });
      });
      if (!_.isEmpty(newTab1)) {
        setNewTab(newTab1);
        setTabActive(newTab1[0].code);
      }
    }
  }, []);

  let exportUrl = '';
  const params = {
    yearMonth,
  };

  if (tabActive === 'CONSTANT_TAB1') {
    exportUrl = 'exportProjectReturnCoefficient';
  }
  if (tabActive === 'CONSTANT_TAB2') {
    exportUrl = 'exportCityReturn';
  }
  if (tabActive === 'CONSTANT_TAB3') {
    exportUrl = 'exportInvestmentReturn';
    params.versionType = CONSTANT_TAB_KEY6;
    params.vsVersionType = CONSTANT_TAB_KEY5;
  }
  if (tabActive === 'CONSTANT_TAB4') {
    exportUrl = 'exportInvestmentReturn';
    params.versionType = CONSTANT_TAB_KEY4;
    params.vsVersionType = CONSTANT_TAB_KEY5;
  }
  const sessionToken = localStorage.getItem('sessionToken');
  const exportQueryString = qs.stringify({ ...params, sessionToken });

  return (
    <PageHeaderWrapper
      className="page-header"
      breadcrumb={null}
      title={<></>}
      tags={
        <Tabs
          style={{ width: 620 }}
          size="large"
          activeKey={tabActive}
          animated={false}
          onChange={val => setTabActive(val)}
        >
          {newTab.map(({ name, code }) => (
            <TabPane tab={name} key={code} />
          ))}
        </Tabs>
      }
      extra={
        <>
          截止年月：
          <DatePicker.MonthPicker
            allowClear={false}
            onChange={(momentDate, formatDate) => setYearMonth(formatDate)}
            value={moment(yearMonth)}
            format="YYYY-MM"
            disabledDate={current => current && current > moment().endOf('day')}
          />
          &nbsp;&nbsp;
          <AuthorizedButton authority={`Analysis_payBackModulus_${tabActive}`}>
            <Button
              disabled={exportExcel}
              className="yellow-button"
              target="_blank"
              href={`${process.env.apiUrl}/api/v1/report/${exportUrl}?${exportQueryString}`}
            >
              导出报表
            </Button>
          </AuthorizedButton>
        </>
      }
    >
      <Card className="page-header-card" bordered={false}>
        {tabActive === 'CONSTANT_TAB1' && (
          <ProjectTab yearMonth={yearMonth} setExportExcel={setExportExcel} />
        )}
        {tabActive === 'CONSTANT_TAB2' && (
          <CityTab yearMonth={yearMonth} setExportExcel={setExportExcel} />
        )}
        {tabActive === 'CONSTANT_TAB3' && (
          <PromiseTab yearMonth={yearMonth} setExportExcel={setExportExcel} />
        )}
        {tabActive === 'CONSTANT_TAB4' && (
          <AbilityTab yearMonth={yearMonth} setExportExcel={setExportExcel} />
        )}
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ Permissions }) => ({
  Permissions,
}))(Page);
